<template>
    <div class="login">
        <van-field maxlength="11" label-width="30px" placeholder="请输入手机号" v-model="tel" type="tel" label="+86 " size="large"
            @focus="clearNum" @blur="checkNum" />
        <van-button round block type="danger" @click="submit">一键登录</van-button>
        <van-tabbar v-model="active" fixed @change="onChange">
            <van-tabbar-item icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="tv-o">直播</van-tabbar-item>
            <van-uploader :after-read="afterRead">
                <van-tabbar-item icon="plus">搭一搭</van-tabbar-item>
            </van-uploader>
            <van-tabbar-item icon="chat-o">消息</van-tabbar-item>
            <van-tabbar-item icon="user-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
    name: 'Login',
    data() {
        return {
            tel: '',
            active: 4,
        }
    },
    created: function () {


    },
    methods: {
        afterRead(file) {
            this.$router.push({ path: '/say', query: { file: file } })
        },
        checkNum: function () {
            var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;

            const flag = myreg.test(this.tel);
            if (!flag) {
                this.$toast({ message: '请输入正确的手机号', position: 'top' });
                return false
            }

        },
        clearNum: function () {
            this.tel = ''
            window.localStorage.removeItem("dazi_shadow")
        },
        submit: function () {
            if (!this.tel) {
                this.$toast({ message: '请输入手机号', position: 'top' });
            } else {
                var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                const flag = myreg.test(this.tel);
                if (!flag) {
                    this.$toast({ message: '请输入正确的手机号', position: 'top' });
                } else {
                    this.$axios.get('http://localhost:9090/dazi/user/findByTel?tel=' + this.tel)
                        .then(res => {
                            console.log(res.data);
                            if (res.data.dazi_number != null && res.data.dazi_number != 'undefine') {
                                this.$router.push("/me");
                                window.localStorage.setItem("dazi_", this.tel)
                            }
                        })
                }

            }
        },
        onChange(index) {

            if (index == 0) {
                this.$router.push("/")
            }

            if (index == 1) {
                this.$router.push("/tv");
            }
            if (index == 3) {
                const data = window.localStorage.getItem('dazi_')
                if (data) {
                    this.$router.push("/message");
                }
                this.active = 4
                this.$toast({ message: "请先登录", position: 'top' })
            }

        },
    }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.van-field {
    margin-top: 56%;
}

.van-button {
    margin-top: 20%;
    width: 70%;
    margin-left: 15%;
}
</style>
